﻿@using MyCompanyName.AbpZeroTemplate.Web.Areas.AppAreaName.Startup
@{
    ViewBag.CurrentPageName = AppAreaNamePageNames.Common.AuditLogs;
}

@section Styles {
    <link rel="stylesheet" abp-href="/view-resources/Areas/AppAreaName/Views/AuditLogs/index.css" asp-append-version="true" />
}

@section Scripts {
    <script abp-src="/view-resources/Areas/AppAreaName/Views/AuditLogs/Index.js" asp-append-version="true"></script>
}

<div class="kt-subheader kt-grid__item">
    <div class="kt-subheader__main">
        <h3 class="kt-subheader__title">
            <span>@L("AuditLogs")</span>
        </h3>
    </div>
</div>

<div class="kt-content">
    <div class="kt-portlet">
        <div class="kt-portlet__body">
            <div id="SettingsTabPanel" class="tabbable-line">

                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item">
                        <a href="#AuditLogsTab" class="nav-link active" data-toggle="tab" role="tab">
                            @L("OperationLogs")
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#EntityChangesTab" class="nav-link" data-toggle="tab" role="tab">
                            @L("ChangeLogs")
                        </a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-content">
                        <div class="tab-pane active" id="AuditLogsTab" role="tabpanel">
                            <div class="row margin-bottom-10">
                                <div class="col-sm-12 text-right">
                                    <button id="ExportAuditLogsToExcelButton" class="btn btn-success"><i class="far fa-file-excel"></i> @L("ExportToExcel")</button>
                                    <button id="RefreshAuditLogsButton" class="btn btn-primary"><i class="fa fa-sync"></i> @L("Refresh")</button>
                                </div>
                            </div>
                            <div class="kt-form">
                                <form id="AuditLogFilterForm">
                                    <div class="row align-items-center mb-4">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="StartEndRange" class="control-label">@L("DateRange")</label>
                                                <input id="StartEndRange" type="text" class="form-control date-range-picker" />
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="UserName" class="control-label">@L("UserName")</label>
                                                <input id="UserName" type="text" name="UserName" class="form-control">
                                            </div>
                                        </div>
                                    </div>
                                    <div id="AdvacedAuditFiltersArea" style="display: none" class="row mb-4">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="ServiceName" class="control-label">@L("Service")</label>
                                                <input id="ServiceName" name="ServiceName" type="text" class="form-control">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="control-label" style="display: block">@L("Duration")</label>
                                            <div class="input-group" style="width: 250px !important;">
                                                <input type="number" name="MinExecutionDuration" only-number="" class="form-control" min="0" max="86400000" ng-minlength="0" ng-maxlength="8">
                                                <div class="input-group-append"><span class="input-group-text" id="basic-addon2">---</span></div>
                                                <input type="number" name="MaxExecutionDuration" only-number="" class="form-control" min="0" max="86400000" ng-minlength="0" ng-maxlength="8">
                                            </div>
                                        </div>

                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="MethodName" class="control-label">@L("Action")</label>
                                                <input id="MethodName" type="text" name="MethodName" class="form-control">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="HasException" class="control-label">@L("ErrorState")</label>
                                                <select id="HasException" name="HasException" class="form-control">
                                                    <option value="">@L("All")</option>
                                                    <option value="false">@L("Success")</option>
                                                    <option value="true">@L("HasError")</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="BrowserInfo" class="control-label">@L("Browser")</label>
                                                <input id="BrowserInfo" type="text" name="BrowserInfo" class="form-control">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">

                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mb-4">
                                        <div class="col-sm-6">
                                            <span id="ShowAdvancedFiltersSpan" class="clickable-item text-muted"><i class="fa fa-angle-down"></i> @L("ShowAdvancedFilters")</span>
                                            <span id="HideAdvancedFiltersSpan" class="clickable-item text-muted" style="display: none"><i class="fa fa-angle-up"></i> @L("HideAdvancedFilters")</span>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="row align-items-center">
                                <table id="AuditLogsTable" class="display table table-striped table-bordered table-hover dt-responsive nowrap">
                                    <thead>
                                        <tr>
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                            <th>@L("UserName")</th>
                                            <th>@L("Service")</th>
                                            <th>@L("Action")</th>
                                            <th>@L("Duration")</th>
                                            <th>@L("IpAddress")</th>
                                            <th>@L("Client")</th>
                                            <th>@L("Browser")</th>
                                            <th>@L("Time")</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                        <div class="tab-pane" id="EntityChangesTab" role="tabpanel">
                            <div class="row margin-bottom-10">
                                <div class="col-sm-12 text-right">
                                    <button id="ExportEntityChangesToExcelButton" class="btn btn-success"><i class="far fa-file-excel"></i> @L("ExportToExcel")</button>
                                    <button id="RefreshEntityChangesButton" class="btn btn-primary"><i class="fa fa-sync"></i> @L("Refresh")</button>
                                </div>
                            </div>
                            <div class="kt-form">
                                <form id="EntityChangeFilterForm">
                                    <div class="row align-items-center mb-4">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="StartEndRangeEntityChange" class="control-label">@L("DateRange")</label>
                                                <input id="StartEndRangeEntityChange" type="text" class="form-control date-range-picker" />
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="UserNameEntityChange" class="control-label">@L("UserName")</label>
                                                <input id="UserNameEntityChange" type="text" name="UserName" class="form-control">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="EntityTypeFullName" class="control-label">@L("Object")</label>
                                                <select id="EntityTypeFullName" name="EntityTypeFullName" class="form-control" id="EntityTypeFullName">
                                                    <option value="" selected="selected">@L("All")</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="row align-items-center">
                                <table id="EntityChangesTable" class="display table table-striped table-bordered table-hover dt-responsive nowrap">
                                    <thead>
                                        <tr>
                                            <th></th>
                                            <th></th>
                                            <th>@L("Action")</th>
                                            <th>@L("Object")</th>
                                            <th>@L("UserName")</th>
                                            <th>@L("Time")</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="AuditLogDetailModal" tabindex="-1" role="modal" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">
                    <span ng-if="!vm.user.id">@L("AuditLogDetail")</span>
                </h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal audit-log-detail-view" role="form">
                    <div class="form-body">
                        <h5 class="form-section">@L("UserInformations")</h5>
                        <div class="form-group kt-form__group row">
                            <label class="col-lg-3 col-form-label">
                                @L("UserName"):
                            </label>
                            <div class="col-lg-9">
                                <label id="AuditLogDetailModal_UserName" class="col-form-label"></label>
                            </div>
                        </div>
                        <div class="form-group kt-form__group row">
                            <label class="col-lg-3 col-form-label">
                                @L("IpAddress"):
                            </label>
                            <div class="col-lg-9">
                                <label id="AuditLogDetailModal_ClientIpAddress" class="col-form-label"></label>
                            </div>
                        </div>
                        <div class="form-group kt-form__group row">
                            <label class="col-lg-3 col-form-label">
                                @L("Client"):
                            </label>
                            <div class="col-lg-9">
                                <label id="AuditLogDetailModal_ClientName" class="col-form-label"></label>
                            </div>
                        </div>
                        <div class="form-group kt-form__group row">
                            <label class="col-lg-3 col-form-label">
                                @L("Browser"):
                            </label>
                            <div class="col-lg-9">
                                <label id="AuditLogDetailModal_BrowserInfo" class="col-form-label"></label>
                            </div>
                        </div>
                        <div class="form-group kt-form__group row" id="AuditLogDetailModal_ImpersonatorInfo">
                            <label class="col-lg-3 col-form-label">

                            </label>
                            <div class="col-lg-9 text-warning">
                                @L("AuditLogImpersonatedOperationInfo")
                            </div>
                        </div>

                        <h5 class="form-section margin-top-20">@L("ActionInformations")</h5>
                        <div class="form-group kt-form__group row">
                            <label class="col-lg-3 col-form-label">
                                @L("Service"):
                            </label>
                            <div class="col-lg-9">
                                <label id="AuditLogDetailModal_ServiceName" class="col-form-label"></label>
                            </div>
                        </div>
                        <div class="form-group kt-form__group row">
                            <label class="col-lg-3 col-form-label">
                                @L("Action"):
                            </label>
                            <div class="col-lg-9">
                                <label id="AuditLogDetailModal_MethodName" class="col-form-label"></label>
                            </div>
                        </div>
                        <div class="form-group kt-form__group row">
                            <label class="col-lg-3 col-form-label">
                                @L("Time"):
                            </label>
                            <div class="col-lg-9">
                                <label id="AuditLogDetailModal_ExecutionTime" class="col-form-label"></label>
                            </div>
                        </div>
                        <div class="form-group kt-form__group row">
                            <label class="col-lg-3 col-form-label">
                                @L("Duration"):
                            </label>
                            <div class="col-lg-9">
                                <label id="AuditLogDetailModal_Duration" class="col-form-label"></label>
                            </div>
                        </div>
                        <div class="form-group kt-form__group row">
                            <label class="col-lg-3 col-form-label">
                                @L("Parameters"):
                            </label>
                            <div class="col-lg-9 alert kt-alert kt-alert--default">
                                <pre lang="js" id="AuditLogDetailModal_Parameters"></pre>
                            </div>
                        </div>

                        <h5 class="form-section margin-top-20">@L("CustomData")</h5>
                        <div class="form-group kt-form__group row">
                            <p class="form-control-static col-lg-12" id="AuditLogDetailModal_CustomData_None">
                                @L("None")
                            </p>
                        </div>

                        <div class="form-group kt-form__group row">
                            <div class="col-lg-12">
                                <pre id="AuditLogDetailModal_CustomData" class="alert kt-alert kt-alert--default"></pre>
                            </div>
                        </div>

                        <h5 class="form-section margin-top-20">@L("ErrorState")</h5>
                        <div class="form-group kt-form__group row">
                            <p id="AuditLogDetailModal_Success" class="form-control-static col-lg-12">
                                <i class="fa fa-check-circle kt-font-success"></i> @L("Success")
                            </p>
                        </div>
                        <div class="form-group kt-form__group row">
                            <div class="col-lg-12">
                                <pre id="AuditLogDetailModal_Exception" class="alert kt-alert kt-alert--default"></pre>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">@L("Close")</button>
            </div>
        </div>
    </div>
</div>
